import Vue from 'vue'
import App from './App.vue'
// 导入路由文件  挂载vue实例
// 导入文件vue里 index.js可以省略 
import router from './router'

// 导入rem适配插件 flexble.js
import 'lib-flexible'
//导入animate.css 插件
import 'animate.css';

import store from './store'
import headerCom from './components/headerCom.vue'
// vue项目安装配置echarts 
// 安装echarts  5.x
// npm i  echarts@4.0.0 --save
// 导入echarts 
import  echarts from 'echarts'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)
console.log(echarts)
// 将echarts插件挂载到Vue的原型，让每个组件都能使用
// Vue挂载原型的插件 就是全局插件
// Vue.prototype.起插件名="导入的插件"

Vue.prototype.$echarts =echarts;


// echarts 是生成的还是canvas 图像

Vue.config.productionTip = false
// 全局的内容 在main.js 
// Vue.component（组件名,"导入的组件" ）
// 全局组件  在任意组件都可以使用
Vue.component("headerCom",headerCom)


// vue的自定义全局指令
Vue.directive("focus",{
    // bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
    bind(){},
    // inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）
    inserted(el,binding,vNode){
        // el--当前挂载指令的元素 原生元素
        // binding.name--指令名
        // binding.value--指令的值
        // binding.oldVal--原来的值
        // 假如指令后的值为真 让当前元素获取焦点
        if(binding.value){
          el.focus()
        }else{
          el.blur()
        }
    },
    // update:所在组件的vnode(虚拟dom)更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了变化，也可能没有
    update(){

    },
    // componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用
     componentUpdate(){

     },
    //  只调用一次，指令与元素解绑时调用
     unbind(){

     }
})
let power=1;
 //权限指令 有些菜单 无权限者 无法访问
Vue.directive("permission",{
  bind(){},
  inserted(el,binding){
    // 1 超级管理员 2 普通管理员
    if(power==1){
      el.style.display="inline-block";
    }
    if(power==2){
      el.style.display="none";
    }
  }
})

new Vue({
  // el:"#app",
  router:router, //vue实例挂载文件
  store,
  data(){
    return {
     
    }
  },
  render: h => h(App)
}).$mount("#app")
